<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>星趣米娱-管理后台</title>
</head>
<body>
<div id="box"><canvas class="particles-js-canvas-el" width="891" height="901" style="width: 100%; height: 100%;"></canvas></div>
<div class="cent-box">
    <div class="cent-box-header">
        <h1 class="main-title"></h1>
        <h2 class="sub-title"> 渠道管理系统</h2>
    </div>

    <div class="cont-main clearfix">
        <form class="login form">
            <div class="group">
                <div class="group-ipt email">
                    <input type="text" name="account" class="ipt" placeholder="输入您的登录账号" required="">
                </div>
                <div class="group-ipt password">
                    <input type="password" name="password" id="password" class="ipt" placeholder="输入您的登录密码" required="">
                </div>
            </div>
            <!--<div class=" verify">-->
                <!--<div id="embed-captcha"></div>-->
                <!--<p id="wait" class="show">加载验证码,请稍候...</p>-->
            <!--</div>-->
            <div class="button">
                <button type="submit" class="login-btn register-btn button" id="embed-submit">登录</button>
            </div>
        </form>

        <div class="remember clearfix">
            <!--<label class="remember-me"><a href="#">QQ登录</a></label>-->
            <label class="forgot-password">
                <a href="#" id="forget">忘记密码？</a>
            </label>
        </div>
    </div>
</div>

<div class="footer">
    <p>© 2017 <a href="https://www.miyuhaiwai.com"> 星趣米娱</a></p>
</div>


<style>
    * { padding: 0;  margin: 0;  list-style: none;  text-decoration: none; }
    html, body { height: 100%; width: 100%; font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif; color: #555; font-size: 15px; line-height: 1.7;}
    input:focus { outline: none; }
    canvas { display: block; vertical-align: bottom; }
    #box { width: 100%; height: 100%; background-size: cover; background: #F7FAFC no-repeat 50% 50%; position: fixed; top: 0; left: 0; right: 0; om: 0; z-index: 1; }
    .cent-box { width: 300px; height: 440px; vertical-align: middle; white-space: normal; position: absolute; z-index: 2; left: 50%; top: 50%; margin: -270px 0 0 -150px; }
    .register-box { height: 490px; margin-top: -270px; }
    .cent-box-header { text-align: center; }
    .hide { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; }
    .cent-box-header .main-title { background: transparent url(__STATIC__/img/xqmy_login.png) no-repeat 0 center; width: 300px;
        height: 110px; }
    .cent-box-header .sub-title { width: 160px; height: 50px; margin: 0 auto; background-size: contain; font-weight: 600; font-size:18px; }
    .clearfix:before { content: ''; display: table; }
    .index-tab { text-align: center; font-size: 18px; margin-bottom: 10px; }
    .index-tab .index-slide-nav { display: inline-block; position: relative; }
    .index-tab .index-slide-nav a { float: left; width: 4em; line-height: 35px; opacity: 0.7; -webkit-transition: opacity .15s, color .15s; sition: opacity .15s, color .15s; color: #555; }
    .index-tab .index-slide-nav a:hover { color: #0f88eb; opacity: 1; }
    .index-tab .index-slide-nav a.active { opacity: 1; color: #0f88eb; }
    .slide-bar { position: absolute; left: 0; bottom: 0; margin: 0 .8em; width: 2.4em; height: 2px; background: #0f88eb; }
    .slide-bar1 { left: 4em; }
    .form { float: none; margin: auto; text-align: left; width: 300px; }
    .form .group { padding: 1px 0; border: 1px solid #d5d5d5; border-radius: 3px; }
    .form .group .group-ipt { position: relative; margin: 0; overflow: hidden; }
    .form .group .group-ipt input { padding: 1em .8em; width: 100%; box-sizing: border-box; border: 0; border-radius: 0; box-shadow: none; ground: rgba(255, 255, 255, 0.5); font-family: 'Microsoft Yahei'; color: #666; position: relative; }
    .verify{ margin-top: 5px; }
    .show{ height: 39px; margin: 0 auto; text-align: center; padding-top:5px; }
    #password, #verify, #user, #password1 { border-top: 1px solid #e8e8e8; }
    .imgcode { width: 95px; position: absolute; right: 0; top: 2px; cursor: pointer; height: 40px; }
    .button { margin-top: 18px;outline:none; }
    .button { width: 100%; background: #f60; box-shadow: none; border: 0; border-radius: 3px; line-height: 41px; color: #fff; display: block; -size: 15px; cursor: pointer; font-family: 'Microsoft Yahei'; }
    /*.button:hover { background: #ff4300; }*/
    .remember { margin-top: 10px; line-height: 30px; }
    .remember label { display: block; }
    .remember-me { font-size: 14px; float: left; position: relative; cursor: pointer; }
    .icon { width: 11px; height: 11px; display: block; border: 1px solid #ccc; float: left; margin-top: 8px; margin-right: 5px; cursor: pointer; }
    .zt { width: 9px; height: 9px; background: #0f88eb; margin: 1px; display: block; }
    .forgot-password { float: right; font-size: 14px; }
    .forgot-password a { color: #555; }
    .forgot-password a:hover { text-decoration: underline; }
    .footer { position: fixed; width: 100%; height: 40px; bottom: 0; left: 0; text-align: center; color: #999; z-index: 2; padding-bottom: 10px; -size: 13px; }
    .footer a { color: #666; text-decoration: underline; }
</style>

<script src="__STATIC__/layui/dist/layui.js"></script>
<script type="text/javascript" src="__STATIC__/js/login/particles.js"></script>
<script type="text/javascript" src="__STATIC__/js/login/background.js"></script>
<script>
    layui.use(['jquery', 'layer'], function () {
        var $ = layui.jquery;
        layui.$('form').submit(function () {
            var self = layui.$(this);

            $('.login-btn').css('background', '#ff4300');
            $.post('{:url("Show/login")}', self.serialize(), function (data) {
                if (JSON.parse(data).code != 0) {
                    layui.layer.msg(JSON.parse(data).msg, {offset: 70, shift: 0});
                    return false;
                }
                layui.layer.msg(JSON.parse(data).msg, {icon:1, offset: 70, shift: 0});
                setTimeout(function () {
                    window.location.href = '{:url("Index/index")}';
                }, 1000);
            }).error(function(){
                layui.layer.msg('连接超时，请联系后台管理员', {icon:2, offset: 70, shift: 0});
            });
            return false;
        });

        $('.login-btn').hover(function () {
            $(this).css('background', '#ff4300');
        }, function () {
            $(this).css('background', '#f60');
        });

        $('#forget').click(function(){
            layui.layer.msg('请联系后台管理员', {icon: 3, offset: 70, shift: 0});
        })
    });
</script>

</body>
</html>